import React, { Component } from 'react';
import { Form,Button,Input} from 'antd';
import {withPropsAPI} from "gg-editor";
const FormItem = Form.Item;
import Editor from '@/utils/Editor';
import {connect} from "dva/index";
import {message} from "antd/lib/index";
import savebuttom from '@/assets/account/robotSetup/savebuttom.png';
import styles from '@/pages/Account/Settings/BaseView.less';

@connect(({ dialogCommon, loading }) => ({
  dialogCommon,
  loading: loading.models.data,
}))
class DialogConfirmSetting extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      confirmValue: "",
      content: "",
      noConfirmValue: "",

      dialogId: props.dialogId,
      nodeId: props.nodeId,
      stage: props.stage,
      stageId: "",
    };
  }


  componentDidMount() {
    this.getInit();
  };

  getInit = () =>{
    const { nodeId, dialogId, stage } = this.state;
    console.log("nodeId: " + nodeId + ", dialogId :" + dialogId);
    const { dispatch } = this.props;
    dispatch({
      type: 'dialogCommon/getStage',
      payload: {
        dialogId: dialogId,
        nodeId: nodeId,
        stage: stage,
        field: "setting",
      },
      callback:(res)=>{
        console.log("信息确认-信息确认设置 :" + JSON.stringify(res));
        this.setState({
          stageId: res.dialogStage._id,
          confirmValue: res.dialogStage.setting==null?"":res.dialogStage.setting.resultTitle,
          content: res.dialogStage.setting==null?"":res.dialogStage.setting.resultTemplate,
          noConfirmValue: res.dialogStage.setting==null?"":res.dialogStage.setting.noConfirmReply,
        })
      }
    });
  };

  save = () =>{
    const { dispatch } = this.props;
    const { stageId } = this.state;
    const con = `editorRef`;
    const obj = {
      resultTitle: this.state.confirmValue,
      resultTemplateId:"",
      resultTemplate:this.refs[con].getUeditorContent(),
      noConfirmReply:this.state.noConfirmValue,
    }

    console.log("stageId :" + stageId);
    dispatch({
      type: 'dialogCommon/saveStage',
      payload: {
        _id: stageId,
        field: "setting",
        setting: obj,
      },
      callback:(res)=>{
        if(res.code === 0){
          message.info("保存成功");
        }else{
          message.info("保存失败");
        }
        console.log("信息确认设置结果 :" + JSON.stringify(res));
      }
    });

  };

  changeValue = (event, key) =>{
    switch (key){
      case "confirmValue":
        this.setState({
          confirmValue: event.target.value,
        });
        break
      case "noConfirmValue":
        this.setState({
          noConfirmValue: event.target.value,
        });
        break
    }
  };

  render() {
    return(
      <div>
        <div style={{ paddingLeft:'30px'}}>
         <p className={styles.pTitle}>
           信息确认话术
         </p>
          <Input className={styles.nwInput} style={{ width: '60%'}} placeholder="" value={this.state.confirmValue} onChange={event=>{this.changeValue(event, "confirmValue")}}/>
        </div>

        <div className='fuwenben' style={{ lineHeight: '20px', width: 'calc(100vw - 405px)', zIndex:1,paddingLeft:'30px',marginTop:'30px' }}>
          <p className={styles.pTitle}>信息展示模板</p>
          <Editor content={this.state.content} name="content" id="content" height="250" width="calc(100vw - 245px)" ref="editorRef" />
        </div>

        <div style={{ paddingLeft:'30px',marginTop:'30px' }}>
          <p className={styles.pTitle}>不确认时回复话术</p>
          <Input  className={styles.nwInput} style={{ width: '60%'}}  placeholder="" value={this.state.noConfirmValue} onChange={event=>{this.changeValue(event, "noConfirmValue")}}/>
        </div>

        <div className={styles.flexcen}>
          {/*<Button type="primary" onClick={this.save}>保存</Button>*/}
          <img onClick={this.save} src={savebuttom} />
        </div>
      </div>
    )
  }
}

export default withPropsAPI(DialogConfirmSetting);
